<template>
  <div class="menu">
    <!-- <div class="left">
      <n-menu :options="menuOptions" v-model:value="menu" @update:value="menuChange" /> 

  </div>
  <div class="view">
    <router-view></router-view>
  </div> -->
    <!-- {{ menu }} -->
    <n-layout has-sider class="layout">
      <n-layout-sider
        bordered
        collapse-mode="width"
        :collapsed-width="64"
        :width="220"
        :collapsed="collapsed"
        show-trigger
        @collapse="collapsed = true"
        @expand="collapsed = false"
      >
        <n-menu
          v-model:value="menu"
          :collapsed="collapsed"
          :collapsed-width="64"
          :collapsed-icon-size="22"
          :options="menuOptions"
          @update:value="menuChange"
        />
      </n-layout-sider>
      <n-layout>
        <div class="content" v-show="viewShow">
          <router-view></router-view>
        </div>
      </n-layout>
    </n-layout>
    <!-- <video src="http://em.21dtv.com/songs/60007231.mkv"></video> -->
    <!-- <VideoPlayer src="/sparkle_your_name_am720p.mp4" controls :loop="true" :volume="0.6"></VideoPlayer> -->
  </div>
</template>
<script setup>
import { watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import {
  Workbench,
  Subway,
  SurveillanceCamerasOne,
  User,
  ConnectionBox,
} from "@icon-park/vue-next";
import { NIcon } from "naive-ui";
import { getUserInfo } from "@/api";
import Store from "@/stores";
const store = Store();
// import { VideoPlayer } from '@videojs-player/vue'
// import 'video.js/dist/video-js.css'
const router = useRouter();
const route = useRoute();
const menu = ref(route.name);
const viewShow = ref(false);
const collapsed = ref(false);
const icons = {
  work: Workbench,
  vehicle: Subway,
  camera: SurveillanceCamerasOne,
  cameralist: SurveillanceCamerasOne,
  user: User,
  depat: ConnectionBox,
};
function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icons[icon]) });
}
const menuOptions = ref([]);

function replace() {
  // console.log(store.userInfo.jurisdiction);
  if (!store.userInfo.jurisdiction.includes(route.meta.jurisdiction + "")) {
    // console.log(menuOptions.find(item => item.jurisdiction == store.userInfo.jurisdiction[0]));
    try {
      router.replace({
        name: menuOptions.value.find(
          (item) => item.jurisdiction == store.userInfo.jurisdiction[0]
        ).key,
      });
      $message.warning("暂无权限");
    } catch (error) {}
  }
}
watch(route, () => {
  // console.log(route.name);
  menu.value = route.name;
});
function menuChange(key) {
  // console.log(key);
  router.replace({ name: key });
}

// console.log("111");
// 获取个人信息
getUserinfo();
function getUserinfo() {
  viewShow.value = false;
  getUserInfo().then((res) => {
    setTimeout(() => (viewShow.value = true), 100);
    if (res.code != 200) {
      $message.error(res.message);
      router.push({ name: "login" });
      return;
    }
    if (res.data) {
      store.userInfo = Object.assign(store.userInfo, res.data);
    }
    menuOptions.value = router
      .getRoutes()
      .filter((item) => item.meta.home)[0]
      .children.map((item) => {
        return {
          label: item.meta.title,
          key: item.name,
          icon: renderIcon(item.name),
          jurisdiction: item.meta.jurisdiction + "",
        };
      })
      .filter((item) =>
        store.userInfo.jurisdiction?.includes(item.jurisdiction)
      );
    replace();
  });
}
</script>
<style lang="less" scoped>
.menu {
  height: 100%;
  width: 100%;
  display: flex;

  // .left {
  //   padding-top: 10px;
  //   width: 150px;
  //   height: 100%;
  //   box-shadow: 5px 0 10px #99999931;
  // }
  .layout {
    margin: 15px 0;
    flex: 1;

    .content {
      padding: 15px;
      font-size: 16px;
      height: 100%;
    }
  }
}

.fadeTop-leave,
.fadeTop-enter-to {
  // margin-top: 50px;
  transform: scale(1);
  opacity: 1;
}

.fadeTop-leave-active,
.fadeTop-enter-active {
  transition: all 0.15s;
}

.fadeTop-leave-to,
.fadeTop-enter {
  transform: scale(0.7);
  opacity: 0;
}
</style>
